import React, { useState, useRef } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Modal,
  Platform,
  StatusBar,
  Dimensions,
} from "react-native";
import { Entypo } from "@expo/vector-icons";

const dimen = Dimensions.get("window");
const width = dimen.width;

const Dropdown = ({ ifFirst, onSelect, initialValues, initialStyles }) => {
  const [selectedValue, setValue] = useState(
    initialValues.initOptions[initialValues.initKey]
  );
  const [isShow, setIsshow] = useState(false);
  const [TopOffset, setTopOffset] = useState(0);
  const [LeftOffset, setLeftOffset] = useState(0);

  let positionMark = useRef();

  let selectStyles = {
    // 下拉列表
    valueFontSize: 15,
    valueMarginTop: 9,
    valueMarginLeft: 0,
    valueWith: 100,
    valueBorderRadius: 0,
    borderWidth: [0, 0], // "bottom"底部边框，"all"全边框,"none"无边框
    valueBorderColor: "#ccc",
    // 下拉列表选项
    // optionsMarginTop: 135,
    // optionsMarginLeft: 280,
    optionsFontSize: 15,
    optionsWidth: 90,
    optionsRadius: 5,
    optionsBorderColor: "#eee",
    optionsBackGroundColor: "#fff",
  };

  for (let item in selectStyles) {
    // console.log(item);
    for (let style in initialStyles) {
      if (style == item) {
        selectStyles[item] = initialStyles[style];
      }
    }
  }

  const styles = StyleSheet.create({
    optionsBtn2: {
      justifyContent: "center",
      alignItems: "center",
      width: selectStyles.optionsWidth,
      width: width / 4,
      marginLeft: 0,
      borderWidth: 1,
      borderColor: "#dedede",
    },
    optionsBtn1: {
      justifyContent: "center",
      alignItems: "center",
      width: selectStyles.optionsWidth,
      marginLeft: 0,
      borderBottomWidth: 1,
      borderBottomColor: selectStyles.optionsBorderColor,
    },
    optionsView2: {
      flexDirection: "row",
      flexWrap: "wrap",
    },
    optionsView1: {
      flexDirection: "column",
    },
    textWrapView: {
      paddingTop: 5,
      paddingBottom: 5,
    },
    headText: {
      fontSize: selectStyles.valueFontSize,
      // width: selectStyles.valueWith - 20,
      // borderWidth: 1,
    },
    headStyle: {
      flexDirection: "row",
      width: selectStyles.valueWith,
      justifyContent: "center",
      alignItems: "center",
      borderColor: selectStyles.valueBorderColor,
      borderWidth: selectStyles.borderWidth[0],
      borderBottomWidth: selectStyles.borderWidth[1],
      borderRadius: selectStyles.valueBorderRadius,
    },
    head2Style: {
      flexDirection: "row",
      width: selectStyles.valueWith - 27,
      justifyContent: "center",
      alignItems: "center",
      // borderWidth: 1,
    },
    container: {
      marginTop: selectStyles.valueMarginTop,
      marginLeft: selectStyles.valueMarginLeft,
      width: selectStyles.valueWith,
    },
    itemStyle: {
      marginTop: 2,
      width: 18,
      height: 18,
      // borderWidth: 1,
      // 图片等比例拉伸
      // resizeMode: "contain",
    },
  });

  const optionHandler = () => {
    positionMark.current.measure((x, y, width, height, pageX, pageY) => {
      const AndroidStatusBar =
        Platform.OS === "android" ? StatusBar.currentHeight : 0;
      const topOffset = pageY + height - AndroidStatusBar;
      setTopOffset(topOffset);
      const leftOffset = pageX + width / 2 - selectStyles.optionsWidth / 2;
      setLeftOffset(leftOffset);
    });
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        ref={positionMark}
        onPress={() => {
          setIsshow(true);
          optionHandler();
        }}
      >
        <View style={styles.headStyle}>
          <View style={styles.head2Style}>
            <Text style={styles.headText}>
              {initialValues.initOptions[initialValues.initKey]}
            </Text>
          </View>
          {isShow ? (
            <Entypo name="chevron-up" size={17} color="#999" />
          ) : (
            <Entypo name="chevron-down" size={17} color="#999" />
          )}
        </View>
      </TouchableOpacity>
      <Modal
        visible={isShow}
        transparent={true}
        animationType="fade"
        onRequestClose={() => {}}
      >
        <TouchableWithoutFeedback
          onPress={() => {
            setIsshow(false);
          }}
        >
          <View
            style={{
              height: "100%",
              marginTop: 10,
            }}
          >
            {ifFirst == 1 ? (
              // <TouchableWithoutFeedback>
              <View
                style={{
                  backgroundColor: selectStyles.optionsBackGroundColor,
                  width: selectStyles.optionsWidth,
                  // marginTop: selectStyles.optionsMarginTop,
                  marginTop: TopOffset,
                  // marginLeft: selectStyles.optionsMarginLeft,
                  marginLeft: LeftOffset,
                }}
              >
                <View style={styles.optionsView1}>
                  {initialValues.initOptions.map((item, index) => {
                    return (
                      <TouchableOpacity
                        key={index}
                        style={styles.optionsBtn1}
                        onPress={() => {
                          onSelect(item, index);
                          setValue(item);
                          setIsshow(false);
                        }}
                      >
                        <View style={{ padding: 8 }}>
                          <Text
                            style={{
                              fontSize: selectStyles.optionsFontSize,
                              alignItems: "center",
                            }}
                          >
                            {item}
                          </Text>
                        </View>
                      </TouchableOpacity>
                    );
                  })}
                </View>
              </View>
            ) : (
              // </TouchableWithoutFeedback>
              <TouchableWithoutFeedback>
                <View
                  style={{
                    backgroundColor: selectStyles.optionsBackGroundColor,
                    width: width,
                    // width: selectStyles.optionsWidth,
                    // marginTop: selectStyles.optionsMarginTop,
                    marginTop: TopOffset,
                    marginLeft: 0,
                    // marginLeft: selectStyles.optionsMarginLeft,
                  }}
                >
                  <View style={styles.optionsView2}>
                    {initialValues.initOptions.map((item, index) => {
                      return (
                        <TouchableOpacity
                          key={index}
                          style={styles.optionsBtn2}
                          onPress={() => {
                            onSelect(item, index);
                            setValue(item);
                            setIsshow(false);
                          }}
                        >
                          <View style={{ padding: 8 }}>
                            <Text
                              style={{
                                fontSize: selectStyles.optionsFontSize,
                                alignItems: "center",
                              }}
                            >
                              {item}
                            </Text>
                          </View>
                        </TouchableOpacity>
                      );
                    })}
                  </View>
                </View>
              </TouchableWithoutFeedback>
            )}
          </View>
        </TouchableWithoutFeedback>
      </Modal>
    </View>
  );
};

Dropdown.defaultProps = {
  initialValues: ["没有选项"],
};

export default Dropdown;
